<template>
  <div class="paper-view">
    <h1>{{form.name}}</h1>
    <div class="paper-message">
      <span>试卷类型：{{form.type}}</span>
      <span>所属站段：{{form.section}}</span>
    </div>
    <div class="question-content">
      <a-card class="card" v-if="form.questionList.length !== 0">
        <ul>
          <li v-for="(item, index) in form.questionList" :key="item.id">
            <span class="questionIndex">题目{{ index + 1 }}:</span>
            <div class="questionContent">{{ item.question }}</div>
          </li>
        </ul>
      </a-card>
    </div>
  </div>
</template>

<script>
import {getTemplateDetail} from "@/api/templates";
import question from "@/assets/json/questionList.js";
export default {
  data() {
    return {
      form: {
        name: "",
        section: "",
        type: "",
        questionList: [],
      },
      id: "",
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getTemplate();
  },
  methods: {
    //获取试卷详情
    getTemplate() {
      getTemplateDetail(this.id)
        .then((res) => {
          this.form.section = res.data.section;
          this.form.name = res.data.name;
          this.form.type = res.data.type;
          var questionList = question();
          this.selectId = res.data.questions;
          questionList.forEach((item, index) => {
            for (var i = 0; i < res.data.questions.length; i++) {
              if (res.data.questions[i] == item.id) {
                this.form.questionList.push(item);
              }
            }
          });
          localStorage.setItem("selectKey", JSON.stringify(res.data.questions));
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.paper-view {
  padding: 20px;
  color: #333;

  h1 {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
  }

  .paper-message {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 50px;

    span {
      margin: 0 25px;
      font-size: 16px;
    }
  }

  .card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;

    li {
      position: relative;
      padding: 15px 0;
      margin-bottom: 15px;
    }

    .questionIndex {
      float: left;
      font-size: 14px;
      color: #606266;
      padding: 0 12px 0 0;
      width: 70px;
      font-weight: bold;
    }

    .questionContent {
      margin-left: 60px;
      font-size: 14px;
      color: #303133;
      width: 85%;
    }
  }
}
</style>